import { useState } from "react";
import { Button } from "@/components/ui/button";
import { FileUpload } from "@/components/knowledge-base/FileUpload";
import { Card, CardContent } from "@/components/ui/card";

interface DocumentUploadModalProps {
  knowledgeBaseId: string;
  isOpen: boolean;
  onClose: () => void;
  onSuccess?: () => void;
}

export function DocumentUploadModal({
  knowledgeBaseId,
  isOpen,
  onClose,
  onSuccess,
}: DocumentUploadModalProps) {
  const [uploadStatus, setUploadStatus] = useState<"idle" | "uploading" | "success" | "error">("idle");
  const [errorMessage, setErrorMessage] = useState<string>("");

  if (!isOpen) return null;

  const handleUploadSuccess = () => {
    setUploadStatus("success");
    setTimeout(() => {
      onSuccess?.();
      onClose();
    }, 1500);
  };

  const handleUploadError = (error: string) => {
    setUploadStatus("error");
    setErrorMessage(error);
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div className="relative w-full max-w-3xl rounded-lg bg-white p-6 shadow-lg dark:bg-gray-900">
        <button
          onClick={onClose}
          className="absolute right-4 top-4 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </button>

        <h2 className="mb-4 text-xl font-bold text-gray-900 dark:text-white">
          上传文档
        </h2>

        {uploadStatus === "success" ? (
          <div className="flex flex-col items-center justify-center py-8">
            <svg
              className="mb-4 h-16 w-16 text-green-500"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M5 13l4 4L19 7"
              />
            </svg>
            <p className="text-lg font-medium text-gray-900 dark:text-white">
              上传成功
            </p>
            <p className="text-sm text-gray-500 dark:text-gray-400">
              文档已成功添加到知识库，正在处理中...
            </p>
          </div>
        ) : (
          <>
            <p className="mb-6 text-gray-600 dark:text-gray-300">
              上传文档到您的知识库，支持PDF、Word、TXT和Markdown文件。
              文件将被处理并向量化以便于搜索和生成回答。
            </p>

            <Card className="mb-6 border-dashed">
              <CardContent className="p-6">
                <FileUpload
                  knowledgeBaseId={knowledgeBaseId}
                  onSuccess={handleUploadSuccess}
                  onError={handleUploadError}
                />
              </CardContent>
            </Card>

            {uploadStatus === "error" && (
              <div className="mb-4 rounded-md bg-red-50 p-4 dark:bg-red-950/50">
                <div className="flex">
                  <div className="flex-shrink-0">
                    <svg
                      className="h-5 w-5 text-red-400"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
                      />
                    </svg>
                  </div>
                  <div className="ml-3">
                    <h3 className="text-sm font-medium text-red-800 dark:text-red-200">
                      上传失败
                    </h3>
                    <div className="mt-2 text-sm text-red-700 dark:text-red-300">
                      {errorMessage}
                    </div>
                  </div>
                </div>
              </div>
            )}

            <div className="flex justify-end space-x-3">
              <Button variant="outline" onClick={onClose}>
                取消
              </Button>
              <Button onClick={onClose}>完成</Button>
            </div>
          </>
        )}
      </div>
    </div>
  );
} 